<script setup lang="ts">
import { useLocalStore } from "@/views/monitoy/map/store";
import { getAssetsFile } from "@/utils/map";
import { LMarker, LPolyline } from "@vue-leaflet/vue-leaflet";
import { useMap } from "@/views/monitoy/map/components/Map/index.vue";

const props = defineProps({
  deviceCategoryList: Array<any>,
});
const { L }: any = window;
const store = useLocalStore();
const { selectedFeature } = storeToRefs(store);
const pointOptions = ref();
const lineOptions = ref();

const getIcon = (classId: string) => {
  const pointCategoryList = props.deviceCategoryList?.point;
  if (pointCategoryList) {
    const obj = pointCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      const iconUrl = getAssetsFile("device/" + image + ".png");
      return L.icon({
        iconUrl,
        iconSize: [32, 32],
        iconAnchor: [16, 27],
      });
    }
  }
};
const getColor = (classId: string) => {
  const lineCategoryList = props.deviceCategoryList?.line;
  if (lineCategoryList) {
    const obj = lineCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      return image;
    }
  }
};

watchEffect(() => {
  const map = useMap();

  if (selectedFeature.value) {
    if (selectedFeature.value.pointId) {
      const position = JSON.parse(selectedFeature.value.position);
      const latlng = [position[1], position[0]];
      map.setView(latlng, 18);
    } else {
      const { lon, lat } = selectedFeature.value;
      if (lon && lat) {
        if (map) {
          const latlng = L.coordConver().gcj02_To_gps84(lon, lat);
          map.setView(latlng, 18);
        }
      }
    }
  }
  // else {
  //   ElMessage.warning("没有坐标数据！");
  // }
});
</script>

<template v-if="selectedFeature">
  <LMarker
    v-if="pointOptions"
    :lat-lng="pointOptions.latlng"
    :icon="pointOptions.icon"
  />
  <LPolyline
    v-if="lineOptions"
    :lat-lngs="lineOptions.latlngs"
    color="yellow"
  />
</template>

<style scoped lang="scss"></style>
